<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">
        {{$t('common.tenant')}}
        <i v-if="false" class="iconfont iconzhongyiicon_gaojing"></i>
      </div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table
            :pageMethod="getTableData"
          >
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button type="primary" class="icon-button setting-button" style="width: auto;" @click="$refs['TenantFormDialop'].init('create')">
                  <i class="iconfont iconzhongyiicon_chuangjian" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{$t('common.Create')}}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto;" @click="deleteSystemManager(tableSlotData.table.selectRows)" :disabled="tableSlotData.table.selectRows.length <= 0">
                  <i class="el-icon-delete" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{$t('common.BatchDelete')}}</span>
                </el-button>
              </div>
              <div class="table-right-options">
                <el-input :placeholder="$t('user.tenantSearchPlaceholder')" @keyup.enter.native="tableSearchChange(tableSlotData)" v-model="searchValue" style="width: 200px;" >
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                prop="name"
                :label="$t('common.tenant')"
              >
                <!-- <template #default="props">
                  <link-button :content="props.row.name" :size="10" :font-size="'12px'" @click="$router.push({
                    name: 'TenantManageDetail',
                    params: {
                      tenant: props.row
                    }
                  })" />
                </template> -->
              </el-table-column>
              <el-table-column
                prop="description"
                :label="$t('common.description')"
              >
              </el-table-column>
              <el-table-column
                prop="ad_accounts_count"
                :label="$t('route.user')"
              >
              </el-table-column>
              <el-table-column
                prop="desktops"
                :label="$t('common.desktop')"
              >
              </el-table-column>
              <el-table-column
                :label="$t('common.action')"
                width="120"
              >
                <template #default="props">
                  <link-button :disabled="AuthModule.authrole === 'tenant_admin' && props.row.id === AuthModule.userId" :content="$t('common.delete')" :size="10" :font-size="'12px'" @click="deleteSystemManager([props.row])" style="margin-right: 15px;" />
                  <link-button :content="$t('common.edit')" :size="10" :font-size="'12px'" @click="$refs.TenantFormDialop.init('edit', props.row)" style="margin-right: 15px;" />
                  <!-- <link-button :content="$t('user.PasswordReset')" :size="10" :font-size="'12px'" @click="resetPassword(props.row)" style="margin-right: 15px;" /> -->
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <tenant-form-dialop ref="TenantFormDialop" :submit-method="(action, formData) => {
                if (action === 'create') {
                  return $tunnyApi.apiPostTenant(formData).then(() => tableSlotData.table.refresh());
                } else if (action === 'edit') {
                  return $tunnyApi.apiBatchPutUser('tenant_admin', [{id: formData.id}], formData).then(() => tableSlotData.table.refresh());
                }
              }" />
              <reset-password-dialog ref="ResetPasswordDialog" :reset-method="(item, formData) => $tunnyApi.apiBatchPutUser('system_admin', [{ ...item, ...{ id: item.cloud_user_id } }], { name: item.name, password: formData.new_password }).then(() => {
                tableSlotData.table.refresh();
              })" />
              <delete-dialog ref="DeleteDialog" :delete-method="(itemList) => $tunnyApi.apiBatchDeleteUser('tenant_admin', itemList).then(() => {
                tableSlotData.table.deleteRefresh(itemList.length);
              })" />
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from '../../components/Basic/Button/LinkButton.vue';
import TenantFormDialop from './components/TenantFormDialop.vue';
import ResetPasswordDialog from '../user/components/ResetPasswordDialog.vue';
import DeleteDialog from '../user/components/DeleteDialog.vue';
import { AuthModule } from '../../store/modules/auth';
import PandaApi from '../../api/pandaApi';
import { debounce } from '../../utils/index';
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    TenantFormDialop,
    ResetPasswordDialog,
    DeleteDialog
  },
  computed: {
    AuthModule: () => AuthModule
  },
  data() {
    return {
      searchValue: "",
      tableSearch: false
    };
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    deleteSystemManager(itemList: any) {
      (this as any).$refs.DeleteDialog.init({
        type: 'tenant_manager',
        itemList
      });
    },
    resetPassword(row: any) {
      (this as any).$refs.ResetPasswordDialog.init({
        item: row,
        type: 'tenant_admin'
      });
    },
    /**
     * 桌面用户表格查询方法
     * @param params 表格组件分页参数
     */
    async getTableData(params: any) {
      // 模糊查询和租户选择框
      params.search = (this as any).searchValue;
      if ((this as any).tableSearch) {
        params.page = 1;
        (this as any).tableSearch = false;
      }

      // 调用桌面用户查询接口
      const result = await (this as any).$tunnyApi.apiGetTenantList(params);

      // 循环查询每条桌面用户的资源租户信息
      for (let i = 0; i < result.rows.length; i++) {
        const resourceInfo = await (this as any).$pandaApi.getDesktopCount(result.rows[i].id);
        result.rows[i].desktops = resourceInfo[0].desktops;
      }
      return result;
    }
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}

.delete-warning-icon {
  color: #FF931D;
  font-size: 20px;
  margin-right: 10px;

  &::before {
    font-size: 20px;
  }
}
</style>
